const tbody = document.querySelector('tbody');
const addForm = document.querySelector('.add-form');
// 渲染页面
function getStudentList() {
    axios.get('/student/list')
        .then(result => {

            const arr = result.data.data
            const html = arr.reduce((h, v) => h + `<tr>
    <th scope="row">${v.id}</th>
    <td>${v.name}</td>
    <td>${v.age}</td>
    <td>${v.sex}</td>
    <td>${v.group}</td>
    <td>${v.phone}</td>
    <td>${v.salary}</td>
    <td>${v.truesalary}</td>
    <td>${v.province} ${v.city} ${v.county}</td>
    <td>
      <button type="button" data-id='${v.id}' class="btn btn-primary btn-sm update-show-modal">修改</button>
      <button type="button" data-id='${v.id}' class="btn btn-danger delBtn btn-sm">删除</button>
    </td>
  </tr>`, '')
            tbody.innerHTML = html
        })
}
// 获得下拉列表
function renderSelect(url, params, dom, label, value = '') {
    axios.get(url, { params })
        .then(result => {
            dom.innerHTML = result.data.reduce((h, v) => h + `<option value="${v}">${v}</option>`,
                `<option value="">--${label} --</option>`)
            dom.value = value
        })

}
// 重置表单
function initSelect(selector) {
    const provinceSelect = document.querySelector(`${selector} select[name=province]`);
    const citySelector = document.querySelector(`${selector} select[name=city]`);
    const countySelector = document.querySelector(`${selector} select[name=county]`);
    renderSelect('/geo/province', {}, provinceSelect, '省')


    provinceSelect.addEventListener('change', function () {
        renderSelect('/geo/city', { pname: provinceSelect.value }, citySelector, '市')
        countySelector.innerHTML = '<option value="">--县--</option>'
    })


    citySelector.addEventListener('change', function () {
        renderSelect('/geo/county',
            { pname: provinceSelect.value, cname: citySelector.value },
            countySelector,
            '县')
    })


}
initSelect('#addModal')
initSelect('#updateModal')
getStudentList()



// 添加数据事件
addForm.addEventListener('submit', function (e) {
    e.preventDefault()
    const data = $(addForm).serialize()
    axios.post('/student/add', data)
        .then(result => {
            if (result.data.code === 0) {
                toastr.success(result.data.message)
                addForm.reset()
                $("#addModal").modal("hide");
                getStudentList()
            }
        })
})

// 删除 编辑
tbody.addEventListener('click', function (e) {
    if (e.target.classList.contains('delBtn')) {
        if (confirm('您确定要删除吗？')) {
            const id = e.target.dataset.id
            axios.delete('/student/delete', { params: { id } })
                .then(result => {
                    if (result.data.code === 0) {
                        toastr.success(result.data.message)
                        getStudentList()
                    }
                })
        }
    } else if (e.target.classList.contains('update-show-modal')) {
        $('#updateModal').modal('show')
        const id = e.target.dataset.id
        axios.get('/student/one', { params: { id } })
            .then(result => {
                const obj = result.data.data
                console.log(obj);
                for (const key in obj) {
                    const target = document.querySelector(`#updateModal [name=${key}]`);
                    if (key === 'sex') {
                        document.querySelector(`#updateModal [name=sex][value=${obj.sex}]`).checked = true
                        continue
                    }
                    if (target) {
                        target.value = obj[key]
                    }

                }

                renderSelect('/geo/city', { pname: obj.province }, document.querySelector('#updateModal [name=city]'), '市', obj.city)
                renderSelect('/geo/county', { pname: obj.province, cname: obj.city }, document.querySelector('#updateModal [name=county]'), '市', obj.county)
            })
    }
})
document.querySelector('#updateModal form').addEventListener('submit', function (e) {
    e.preventDefault()
    const data = $(this).serialize()
    axios.put('/student/update', data)
        .then(result => {
            if (result.data.code === 0) {
                toastr.success(result.data.message)
                this.reset()
                $('#updateModal').modal('hide')
                getStudentList()
            }
        })
})